<script lang="ts" setup>
	import { onMounted, ref, type Ref } from "vue";
	import Nav_bottom from "@/componets/nav/nav_bottom";
	import { getHanfu, type HanfuQuery } from "@/api/hanfu/hanfu"
	import { getSimpleList, type Query } from "@/api/simple"
	import { goPhoto, goHanfuList, goPackage, goSample, goActvieList, goTips ,goMy } from "@/util/go"
	import { baseUrl } from "@/api/http"
import { onLoad, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
	const bannerList = ref([
		{
			image:
				"https://only114514.oss-cn-hangzhou.aliyuncs.com/ruchu/background.jpg"
			// title: "如初",
			// subtitle: "汉服体验馆",
		}
		// {
		// 	image:
		// 		"https://public.readdy.ai/ai/img_res/74ef97a003eb709cf48c1dd5db7958a8.jpg",
		// 	title: "春日特惠",
		// 	subtitle: "新品上市",
		// },
		// {
		// 	image:
		// 		"https://public.readdy.ai/ai/img_res/5462511e79fe2d0bee6d6a0d39aeec87.jpg",
		// 	title: "古风摄影",
		// 	subtitle: "定制套餐",
		// },
	]);

	const gridItems = ref([
		{ text: "本店动态", icon: "home", go: goActvieList },
		{ text: "拍照小贴士", icon: "flag", go: goTips },
		// { text: "场地", icon: "flag", go: goVenue},
		{ text: "汉服选区", icon: "shop", go: goHanfuList },
		{ text: "资费套餐", icon: "gift", go: goPackage },
		{ text: "客片欣赏", icon: "image", go: goSample },
		{ text: "关于我们", icon: "person", go: goMy },
	]);
	
	const audios = ref([
		{
			audioSrc:"https://only114514.oss-cn-hangzhou.aliyuncs.com/ruchu/WeChat_20250429195025.mp4"
		}
	])

	const query : Ref<Query> = ref({
		sampleClassId: 0,
		title: "",
		pageNum: 1,
		pageSize: 5
	})


// 首页写真样片数据
	const hanfuList : Ref<any> = ref([])

	const getHanfuList = () => {
		getSimpleList(query.value).then(res => {
			//@ts-ignore
			hanfuList.value.push(...res.data["data"].data.records)
			query.value["pageNum"] = query.value["pageNum"] + 1
		})
	}

	const handleGridItemClick = (item : any) => {
		item.go()
	};
	
	// 分享给朋友
	  onShareAppMessage(() => ({
	    title: '如初国风馆',
	    path: '/pages/index/index', // 替换为你的页面路径
	    imageUrl: 'https://only114514.oss-cn-hangzhou.aliyuncs.com/ruchu/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250606204232.jpg' // 可选：分享图片
	  }))
	  // 分享到朋友圈
	  onShareTimeline(() => ({
	  	  title: '如初国风馆',
	  	  path: '/pages/index/index', // 替换为你的页面路径
	  	  imageUrl: 'https://only114514.oss-cn-hangzhou.aliyuncs.com/ruchu/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250606204232.jpg' // 可选：分享图片
	  }))
	
	getHanfuList()
</script>

<template>
	<view class="page">
		<!-- 顶部轮播图 -->
		<swiper class="banner" circular autoplay interval="3000" duration="500">
			<swiper-item v-for="(item, index) in bannerList" :key="index">
				<image class="banner-image" :src="item.image" mode="aspectFill" />
			</swiper-item>
		</swiper>
		<!-- 功能模块区 -->
		<view class="grid-container">
			<view class="grid-item cursor-pointer" v-for="(item, index) in gridItems" :key="index"
				@tap="handleGridItemClick(item)">
				<view class="icon-wrapper">
					<uni-icons :type="item.icon" size="28" color="#7fbfb0" />
				</view>
				<text class="grid-text">{{ item.text }}</text>
			</view>
		</view>
		
		
		<!-- 视频区 -->
		<view class="movie">
			<swiper class="activeMovies">
				<swiper-item class="activeMovie" v-for="item in audios">
				<video :src="item.audioSrc" show-fullscreen-btn></video>
				</swiper-item>
			</swiper>
		</view>
		
		
		<!-- 展示图片区 -->
		<view class="showcase">
			<view class="showcase-header">
				<text class="showcase-title">写真样片</text>
				<text class="showcase-desc">传统与时尚的完美融合，展现东方女性的优雅之美</text>
			</view>
			<view class="showcase-grid">
				<view v-if="hanfuList.length === 0" class="empty-state">
					<uni-icons type="info" size="48" color="#7fbfb0" />
					<text class="empty-text">暂时没有样片数据</text>
					<text class="empty-subtext">敬请期待商家推出</text>
				</view>
				<view v-else>
					<!-- 修改类型定义以确保hanfuList元素有id属性 -->
					<view class="showcase-item" v-for="i in hanfuList" @click="goPhoto(i.id + '')">
						<image class="showcase-image" mode="widthFix" :src="baseUrl + i.frontCover"></image>
						<view class="showcase-info">
							<text class="showcase-name">{{i.title}}</text>
							<text class="showcase-brief">{{i.apply}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 地址及联系方式 -->
		<view class="footer-container">
		    <!-- 主要内容 -->
		    <view class="footer-content">
		      <!-- 地址信息 -->
		      <view class="info-section">
		        <view class="icon">
		          <uni-icons type="location-filled" size="24" color="#ffffff"></uni-icons>
		        </view>
		        <view class="text-content">
		          <text class="section-title">店铺地址</text>
		          <text class="section-text">吉安市吉州区吉安南大道后河梦回庐陵景区唐风宋韵牌坊楼梯旁天字1号铺</text>
		        </view>
		      </view>
		      
		      <!-- 联系方式 -->
		      <view class="info-section">
		        <view class="icon">
		          <uni-icons type="phone-filled" size="24" color="#ffffff"></uni-icons>
		        </view>
		        <view class="text-content">
		          <text class="section-title">联系我们</text>
		          <text class="section-text">电话: 17870868609/18807960750</text>
		          <text class="section-text">微信: 17870868609/18807960750</text>
		          <text class="section-text">营业时间: 周一至周五13:00~21:30:周末10:00~21:30</text>
		        </view>
		      </view>
		    </view>
		    <!-- 版权信息 -->
		    <view class="copyright">
		      <text>©2025 如初国风馆 版权所有</text>
		    </view>
		  </view>
		
	</view>

	<nav_bottom :index="0"></nav_bottom>
</template>



<style scoped lang="scss">
	.page {
		.movie{
			margin-top: 0;
			margin-left: 5%;
			width: 90%;
			height: 400rpx;
			// 此注释为测试轮播图范围
			// border: 1px solid #999;
			.activeMovies{
				width: 100%;
				height: 100%;
				.activeMovie{
					video{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.banner {
			position: relative;
			width: 750rpx;
			height: 400rpx;
		}

		.swiper-item {
			position: relative;
			width: 100%;
			height: 100%;
		}

		.banner-image {
			width: 100%;
			height: 100%;
		}

		.banner-text {
			.title {
				display: block;
				font-size: 48px;
				color: #333;
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			.subtitle {
				display: block;
				font-size: 24px;
				color: #666;
			}

			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
		}

		display: flex;
		flex-direction: column;
		min-height: 100%;
		padding-top: 85rpx;
		background-color: #f8f8f8;
		padding-bottom: 100rpx;
	}


	.grid-container {
		position: relative;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 30rpx;
		width: 90%;
		margin: 0 auto;
		top: 0rpx;
		padding: 30rpx;
		border-radius: 15rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.grid-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
	}

	.icon-wrapper {
		width: 56px;
		height: 56px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f5f9f8;
		border-radius: 50%;
		margin-bottom: 20rpx;
	}

	.grid-text {
		font-size: 14px;
		color: #333;
	}

	.showcase {
		margin: 30rpx;
	}

	.showcase-header {
		.showcase-title {
			display: block;
			font-size: 20px;
			color: #333;
			font-weight: bold;
			margin-bottom: 16rpx;
		}

		.showcase-desc {
			display: block;
			font-size: 14px;
			color: #666;
		}

		margin-bottom: 30rpx;
	}

	.showcase-grid {
		width: 100%;
	}

	.showcase-item {
		.showcase-image {
			width: 100%;
		}

		.showcase-info {
			padding: 20rpx;
		}

		.showcase-name {
			display: block;
			font-size: 16px;
			color: #333;
			margin-bottom: 8rpx;
		}

		.showcase-brief {
			display: block;
			font-size: 12px;
			color: #999;
		}

		background: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		width: 100%;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
		margin-bottom: 20rpx;
	}

	.empty-state {
		background: #fff;
		border-radius: 15rpx;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
		padding: 60rpx 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;

		.empty-text {
			font-size: 16px;
			color: #333;
			margin: 20rpx 0 10rpx;
		}

		.empty-subtext {
			font-size: 14px;
			color: #999;
		}
	}
	// 视频专区css
	
	
	// 底部地址栏
	
	.footer-container {
	  background-color: #2c3e50;
	  color: #ffffff;
	  padding: 30rpx;
	  font-size: 28rpx;
	}
	
	.footer-content {
	  display: flex;
	  flex-direction: column;
	  max-width: 1200rpx;
	  margin: 0 auto;
	}
	
	.info-section {
	  display: flex;
	  margin-bottom: 30rpx;
	  align-items: flex-start;
	  
	  .icon {
	    margin-right: 20rpx;
	    margin-top: 6rpx;
	  }
	  
	  .text-content {
	    flex: 1;
	    display: flex;
	    flex-direction: column;
	  }
	}
	
	.section-title {
	  font-weight: bold;
	  margin-bottom: 10rpx;
	  font-size: 30rpx;
	}
	
	.section-text {
	  margin-bottom: 8rpx;
	  line-height: 1.6;
	}
	
	.map-btn {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  background-color: #ffffff;
	  color: #2c3e50;
	  padding: 20rpx;
	  border-radius: 50rpx;
	  margin-top: 20rpx;
	  
	  text {
	    margin-left: 10rpx;
	    font-weight: bold;
	  }
	}
	
	.copyright {
	  text-align: center;
	  margin-top: 0rpx;
	  padding-top: 20rpx;
	  border-top: 1rpx solid rgba(255, 255, 255, 0.2);
	  font-size: 24rpx;
	  color: rgba(255, 255, 255, 0.7);
	}

</style>